
<template>
	<view class="live-header">
		<view class="header-right round">
			<view class="header-image justify-center bg-white round align-center">
				<image class="header-image-img round" :src="userInfo.avatar"/>
			</view>
			<view class="header-shop">
				<text class="header-shop-text"> {{ formatEllipsis(userInfo.nickname, 16) }} </text>
				<!-- <view class="header-shop-info">
					<text class="header-shop-info-text">{{ numFormat(online_num) }} 人观看</text>
				</view> -->
			</view>
		</view>
		
		<view class="header-left">
			<view class="image-box">
				<image :src="item" class="userImage"
				v-for="(item, index) in userList" :key="index"></image>
			</view>
			<view class="online_num_box">
				<text class="online_num">{{ numFormat(online_num) }}</text>
			</view>
			<view class="wanl-btn" @tap="back()">
				<image src="/static/images/live_close.png" class="close-image"></image>
			</view>
		</view>
	</view>
</template>



<script>
	import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
	import wanlshop_config from '@/common/config/config';
	
	export default {
		name: "LiveHeader",
		props: {
			state: {
				default: 0
			},
		},
		data() {
			return {
				userInfo:{},
				online_num: 0,
			}
		},
		computed: {
			...mapState(['user'])
		},
		mounted() {
			this.getData();
		},
		methods: {
			editOlineNum(num){
				console.log("go editOlineNum", num);
				this.online_num = num.num;
				this.userList = num.userlist;
			},
			back() {
				this.$emit('back');
			},
			// 初始化
			getData() {
				let that = this;
				uni.request({
					url: '/wanlshop/user/refresh',
					method: 'POST',
					success: res => {
						console.log('/wanlshop/user/refresh', res);
						let url = res.data.userinfo.avatar;
						let image = url;
						if ((/^data:image\//.test(url))) {
							image = url;
						}else if((/^(http|https):\/\/.+/.test(url))){
							image = url;
						}else{
							image = wanlshop_config.cdnurl + url;
						}
						
						res.data.userinfo.avatar = image;
						this.userInfo = res.data.userinfo;
						
						this.$store.commit('user/setUserInfo', res.data.userinfo);
					}
				});
			},
			numFormat(num) {
				return num > 9999 ? ((num - num % 1000) / 10000 + '万') : num
			},
			formatEllipsis(str = '', limitLen = 24) {
				let len = 0,
				reg = /[\x00-\xff]/, //半角字符的正则匹配
				strs = str.split(''),
				inx = strs.findIndex(s => {
					len += reg.test(s) ? 1 : 2
					if (len > limitLen) return true
				})
			    return inx === -1 ? str : str.substr(0, inx) + '...'
			}
		}
	}
</script>

<style>

.live-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: row;
	padding-top: 16rpx;
	padding-left: 24rpx;
	padding-right: 24rpx;
	/* #ifdef MP */
	padding-right: 220rpx;
	/* #endif */
}
	
.header-right{
	display: flex;
	align-items: center;
	flex-direction: row;
	background-color: rgba(0,0,0,.2);
	padding-top: 8rpx;
	padding-right: 16rpx;
	padding-bottom: 8rpx;
	padding-left: 8rpx;
	border-radius: 5000upx;
}

.header-image{
	width: 68rpx;
	height: 68rpx;
	border-radius: 50%;
}

.header-image-img{
	width: 68rpx;
	height: 68rpx;
	border-radius: 50%;
}

.header-shop{
	padding-left: 15rpx;
}

.header-shop-text{
	color: rgba(255, 255, 255, .8);
	font-size: 28rpx;
	line-height: 36rpx;
	max-width: 100rpx;
}

.header-shop-info-text{
	color: rgba(255, 255, 255, .7);
	font-size: 20rpx;
}

.header-btn{
	background: #f40;
	width: 86rpx;
	height: 50rpx;
	justify-content: center;
	align-items: center;
	border-radius: 18rpx;
	margin-left: 30rpx;
}

.header-btn-text{
	color: #fff;
	font-size: 24rpx;
}

.close-image{
	width: 50rpx;
	height: 50rpx;
}


.onlineBox{
	background: #ffffff;
	height: 50rpx;
	border-radius: 30rpx;
	margin-left: 30rpx;
	padding: 0rpx 20rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 24rpx;
	background: rgba(0,0,0,0.2);
	color: white;
}

.header-left{
	display: flex;
	flex-direction: row;
}
.image-box{
	display: flex;
	flex-direction: row;
}
.userImage{
	width: 58rpx;
	height: 58rpx;
	border-radius: 50%;
	margin-right: 10rpx;
}
.online_num_box{
	min-width: 60rpx;
	height: 60rpx;
	background: rgba(0,0,0,0.2);
	border-radius: 30rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20rpx;
	color:#ffffff !important;
}
.online_num{
	color:#ffffff !important;
	font-size: 26rpx;
}
</style>
